<template>
	<view class="custom-tabbar">
		<view class="tabbar-container">
			<!-- 左侧：首页 -->
			<view class="tab-item" :class="{ active: currentPage === 'index' }" @click="switchTab('index')">
				<view class="tab-icon">
					<image 
						:src="currentPage === 'index' ? '/static/index/index-tabbr-2.png' : '/static/index/index-tabbr-1.png'" 
						class="icon-img"
						mode="aspectFit"
					></image>
				</view>
				<text class="tab-text" :class="{ active: currentPage === 'index' }">首页</text>
			</view>
			
			<!-- 中间：应急救援（突出按钮） -->
			<view class="center-button" @click="switchTab('emergency')">
				<view class="center-icon">
					<image src="/static/index/示警@3x.png" class="center-icon-img" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 右侧：我的 -->
			<view class="tab-item" :class="{ active: currentPage === 'my' }" @click="switchTab('my')">
				<view class="tab-icon">
					<image 
						:src="currentPage === 'my' ? '/static/tabbar/my-tabbar(1).png' : '/static/tabbar/my-tabbar.png'" 
						class="icon-img"
						mode="aspectFit"
					></image>
				</view>
				<text class="tab-text" :class="{ active: currentPage === 'my' }">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CustomTabbar',
		data() {
			return {
				currentPage: 'index' // 当前页面标识
			}
		},
		mounted() {
			this.updateCurrentPage()
		},
		methods: {
			// 更新当前页面状态
			updateCurrentPage() {
				const pages = getCurrentPages()
				if (pages.length > 0) {
					const currentPage = pages[pages.length - 1]
					const route = currentPage.route
					
					if (route.includes('index')) {
						this.currentPage = 'index'
					} else if (route.includes('emergency')) {
						this.currentPage = 'emergency'
					} else if (route.includes('my')) {
						this.currentPage = 'my'
					}
				}
			},
			
			// 切换Tab
			switchTab(page) {
				if (this.currentPage === page) return
				
				let url = ''
				switch (page) {
					case 'index':
						url = '/pages/index/index'
						break
					case 'emergency':
						url = '/pages/emergency/emergency'
						break
					case 'my':
						url = '/pages/my/my'
						break
				}
				
				if (url) {
					// 使用redirectTo跳转，因为使用自定义tabbar
					uni.redirectTo({
						url: url,
						success: () => {
							this.currentPage = page
							console.log(`切换到${page}页面成功`)
						},
						fail: (err) => {
							console.error('切换页面失败:', err)
							// 如果redirectTo失败，尝试使用navigateTo
							uni.navigateTo({
								url: url,
								success: () => {
									this.currentPage = page
									console.log(`使用navigateTo切换到${page}页面成功`)
								},
								fail: (navigateErr) => {
									console.error('navigateTo也失败:', navigateErr)
									uni.showToast({
										title: '页面跳转失败',
										icon: 'none'
									})
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.custom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background: transparent;
		padding: 0;
		width: 100%;
	}
	
	.tabbar-container {
		background: #ffffff;
		border-radius: 25rpx 25rpx 0 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 20rpx 0 30rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
		position: relative;
		width: 100%;
		margin: 0;
	}
	
	/* 左右两侧的Tab项 */
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 10rpx 0;
		transition: all 0.3s ease;
	}
	
	.tab-icon {
		width: 48rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8rpx;
	}
	
	.icon-img {
		width: 100%;
		height: 100%;
	}
	
	.tab-text {
		font-size: 20rpx;
		color: #999999;
		transition: color 0.3s ease;
	}
	
	.tab-text.active {
		color: #4A90E2;
		font-weight: 500;
	}
	
	/* 中间突出的按钮 */
	.center-button {
		position: absolute;
		top: -35rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(255, 107, 53, 0.3);
		transition: all 0.3s ease;
	}
	
	.center-button:active {
		transform: translateX(-50%) scale(0.95);
		box-shadow: 0 4rpx 15rpx rgba(255, 107, 53, 0.4);
	}
	
	.center-icon {
		width: 70rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.center-icon-img {
		width: 100%;
		height: 100%;
		filter: brightness(0) invert(1); /* 将图标变为白色 */
	}
	
	/* 响应式设计 */
	@media screen and (max-width: 750rpx) {
		.custom-tabbar {
			padding: 0;
		}
		
		.tabbar-container {
			padding: 15rpx 0 25rpx;
		}
		
		.center-button {
			width: 110rpx;
			height: 110rpx;
			top: -30rpx;
		}
		
		.center-icon {
			width: 60rpx;
			height: 60rpx;
		}
		
		.tab-icon {
			width: 44rpx;
			height: 44rpx;
		}
		
		.tab-text {
			font-size: 18rpx;
		}
	}
	
	/* 安全区域适配 */
	.tabbar-container {
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	}
</style>